<!-- backend/templates/visualization.html -->
{% extends "base.html" %}

{% block content %}
    <h2 class="mb-4">数据可视化</h2>

    <!-- 创建图表的表单 -->
    <form id="createChartForm" class="mb-4">
        <div class="mb-3">
            <label for="forecastSelect" class="form-label">选择预测记录</label>
            <select class="form-select" id="forecastSelect" required>
                <option value="">选择预测记录</option>
                <!-- 预测记录列表将被填充在这里 -->
            </select>
        </div>

        <div class="mb-3">
            <label for="chartType" class="form-label">图表类型</label>
            <select class="form-select" id="chartType" required>
                <option value="">选择图表类型</option>
                <option value="line">折线图</option>
                <option value="bar">柱状图</option>
                <option value="pie">饼图</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary w-100">创建图表</button>
    </form>

    <!-- 消息显示区域 -->
    <div id="message"></div>

    <!-- 加载中的指示器 -->
    <div id="loading" class="text-center" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <h3 class="mt-5">已创建的图表</h3>

    <!-- 图表展示区域 -->
    <div id="chartsContainer" class="row">
        <!-- 图表将被添加到此处 -->
    </div>

    <script>
        // 当文档内容加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            // 获取表单和显示消息的元素
            const createChartForm = document.getElementById('createChartForm');
            const messageDiv = document.getElementById('message');
            const chartsContainer = document.getElementById('chartsContainer');
            const loadingDiv = document.getElementById('loading');
            const forecastSelect = document.getElementById('forecastSelect');
            const chartTypeSelect = document.getElementById('chartType');

            // 加载预测记录到选择框
            const loadForecasts = async () => {
                try {
                    // 发送 GET 请求获取预测记录
                    const response = await fetch('/api/forecast/list', {
                        method: 'GET',
                        credentials: 'include'
                    });
                    const data = await response.json();

                    // 检查响应状态
                    if (response.ok) {
                        // 清空选择框并填充新的选项
                        forecastSelect.innerHTML = `<option value="">选择预测记录</option>`;
                        data.forecasts.forEach(forecast => {
                            const option = document.createElement('option');
                            option.value = forecast.id; // 预测记录的ID
                            option.textContent = `ID ${forecast.id} - 文件: ${forecast.file_name} - 品类: ${forecast.category}`;
                            forecastSelect.appendChild(option); // 添加选项到选择框
                        });
                    } else {
                        forecastSelect.innerHTML = `<option value="">无法加载预测记录</option>`; // 请求失败时的提示
                    }
                } catch (error) {
                    console.error('加载预测记录列表失败:', error); // 输出错误信息
                    forecastSelect.innerHTML = `<option value="">加载预测记录时发生错误</option>`;
                }
            };

            // 创建图表的事件监听
            createChartForm.addEventListener('submit', async (e) => {
                e.preventDefault(); // 阻止默认的表单提交行为

                const forecastId = forecastSelect.value; // 获取选择的预测记录ID
                const chartType = chartTypeSelect.value; // 获取选择的图表类型

                // 检查是否填写必填字段
                if (!forecastId || !chartType) {
                    messageDiv.innerHTML = `<div class="alert alert-warning">请填写所有必填字段。</div>`;
                    return;
                }

                // 构建 JSON 数据
                const chartData = {
                    chart_type: chartType, // 图表类型
                    forecast_id: parseInt(forecastId) // 预测记录ID
                };

                try {
                    loadingDiv.style.display = 'block'; // 显示加载指示器
                    messageDiv.innerHTML = ''; // 清空消息区域

                    // 发送 POST 请求创建图表
                    const response = await fetch('/api/visualization/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        credentials: 'include',
                        body: JSON.stringify(chartData) // 发送的请求体
                    });

                    const data = await response.json(); // 解析响应数据
                    loadingDiv.style.display = 'none'; // 隐藏加载指示器

                    // 检查响应状态
                    if (response.ok) {
                        messageDiv.innerHTML = `<div class="alert alert-success">图表创建成功。</div>`;
                        createChartForm.reset(); // 重置表单
                        loadCharts(); // 重新加载图表列表
                    } else {
                        messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                    }
                } catch (error) {
                    loadingDiv.style.display = 'none'; // 隐藏加载指示器
                    console.error('图表创建失败:', error); // 输出错误信息
                    messageDiv.innerHTML = `<div class="alert alert-danger">图表创建失败，请重试。</div>`;
                }
            });

            // 加载图表列表的函数
            const loadCharts = async () => {
                try {
                    // 发送 GET 请求获取图表列表
                    const response = await fetch('/api/visualization', {
                        method: 'GET',
                        credentials: 'include'
                    });
                    const data = await response.json();

                    // 检查响应状态
                    if (response.ok) {
                        chartsContainer.innerHTML = ''; // 清空现有图表
                        // 遍历返回的图表数据，创建并添加到页面
                        data.charts.forEach(chart => {
                            const col = document.createElement('div'); // 创建列
                            col.className = 'col-md-6 mb-4'; // 设置列样式

                            const card = document.createElement('div'); // 创建卡片
                            card.className = 'card';

                            const img = document.createElement('img'); // 创建图像元素
                            img.src = chart.image_url; // 使用后端返回的 image_url
                            img.className = 'card-img-top'; // 设置图片样式
                            img.alt = `Chart ${chart.id}`; // 设置图片替代文本

                            const cardBody = document.createElement('div'); // 创建卡片主体
                            cardBody.className = 'card-body d-flex justify-content-between align-items-center';

                            const title = document.createElement('h5'); // 创建图表标题
                            title.className = 'card-title';

                            // 确保 forecast_info.category 存在且为字符串
                            const category = chart.forecast_info && typeof chart.forecast_info.category === 'string' ? chart.forecast_info.category : '未知';
                            title.textContent = `图表 ID: ${chart.id} | 品类: ${category}`; // 设置标题文本

                            const deleteButton = document.createElement('button'); // 创建删除按钮
                            deleteButton.className = 'btn btn-sm btn-danger';
                            deleteButton.textContent = '删除'; // 设置按钮文本
                            deleteButton.onclick = () => deleteChart(chart.id); // 删除按钮事件处理

                            // 将元素添加到卡片主体
                            cardBody.appendChild(title);
                            cardBody.appendChild(deleteButton);

                            // 将图片和主体添加到卡片
                            card.appendChild(img);
                            card.appendChild(cardBody);

                            // 将卡片添加到列
                            col.appendChild(card);
                            // 将列添加到图表容器
                            chartsContainer.appendChild(col);
                        });
                    } else {
                        chartsContainer.innerHTML = `<div class="text-danger">无法加载图表列表。</div>`;
                    }
                } catch (error) {
                    console.error('加载图表列表失败:', error); // 输出错误信息
                    chartsContainer.innerHTML = `<div class="text-danger">加载图表列表时发生错误。</div>`;
                }
            };

            // 删除图表的函数
            window.deleteChart = async (chartId) => {
                // 确认用户是否要删除图表
                if (!confirm(`确定要删除图表 ID ${chartId} 吗？`)) return;

                try {
                    // 发送 DELETE 请求删除图表
                    const response = await fetch(`/api/visualization/delete/${chartId}`, {
                        method: 'DELETE',
                        credentials: 'include'
                    });
                    const data = await response.json();

                    // 检查响应状态
                    if (response.ok) {
                        messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                        loadCharts(); // 重新加载图表列表
                    } else {
                        messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                    }
                } catch (error) {
                    console.error('删除图表失败:', error); // 输出错误信息
                    messageDiv.innerHTML = `<div class="alert alert-danger">删除图表失败，请重试。</div>`;
                }
            };

            // 初始加载预测记录和图表列表
            loadForecasts();
            loadCharts();
        });
    </script>
{% endblock %}
